import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faToolbox, faBars } from '@fortawesome/free-solid-svg-icons';
import reactLogo from './assets/react.svg';
import { appContainerStyles, mainContainerStyles, sidebarStyles } from './App.styles';
import { Outlet } from 'react-router-dom';
import ErrorBoundary from '#components/ErrorBoundary';
import SidebarNav from '#components/SidebarNav';
import { NavItem } from '#types/routeTypes';

type AppProps = {
  navItems: NavItem[];
};

function App({ navItems }: AppProps) {
  const [count, setCount] = useState(0);

  return (
    <div css={appContainerStyles}>
      <aside css={sidebarStyles}>
        <header>
          <h1>
            <FontAwesomeIcon icon={faToolbox} />
            「哦我的工具箱」
          </h1>
          <button>
            <FontAwesomeIcon icon={faBars} />
          </button>
        </header>
        <SidebarNav navItems={navItems} />
      </aside>

      <div css={mainContainerStyles}>
        <header>
          <h1>首页</h1>
          <img src={reactLogo} className="App-logo" alt="logo" />
        </header>
        <main>
          <ErrorBoundary>
            <Outlet />
          </ErrorBoundary>
        </main>
        <footer>
          <a href="https://time.geekbang.org/column/intro/100119601" target="_blank" rel="noreferrer">
            《现代React Web开发实战》
          </a>
        </footer>
      </div>
    </div>
  );
}

export default App;
